import '../common';
//@ts-ignore
import md5 from 'md5';
import {
    checkAnRun,
    logout,
    publishStreamId,
    zg,
    appID,
    useLocalStreamList,
    enterRoom,
    publish,
    publishType,
    getToken,
    loginRoom,
    previewVideo,
    sei
} from '../common';
import { getBrowser } from '../assets/utils';
import { utf8ByteDecode } from '../assets/utils';
import flvjs from '../assets/flv.min.js';
// import flvjs from 'flv.js';

let flvPlayer = null;
let playTime;
let cdnFlvPlayer = null;
const ua = navigator.userAgent.toLowerCase();
let isAndWechat = false;
let videoElement;
let cdnUrls = [];
let cdnVideoElement;
let cdnFlvPlayTimer;
let cdnPlayTime;
let isLogin = false;
let playType = 'all';
let previewStream;
let useFlvJS = false;

console.warn('ua', ua);
// @ts-ignore
if ((ua.indexOf('android') > -1 || ua.indexOf('linux') > -1) && ua.match(/MicroMessenger/i) == 'micromessenger') {
    console.warn('当前浏览器为微信浏览器');
    isAndWechat = true;
}

function filterStreamList(streamInfo) {
    const flv = {};
    const hls = {};
    const rtmp = {};

    const streamListUrl = [];

    // console.log(zg.stateCenter.streamList);

    for (const key in streamInfo) {
        if (key == 'urlsFLV' || key == 'urlsHttpsFLV') {
            flv[key] = streamInfo[key];
        }
        if (key == 'urlsHLS' || key == 'urlsHttpsHLS') {
            hls[key] = streamInfo[key];
        }
        if (key == 'urlsRTMP') {
            rtmp[key] = streamInfo[key];
        }
    }

    console.warn('flv', flv, hls, rtmp);
    const pro = window.location.protocol;
    const browser = getBrowser();

    if (pro == 'http:') {
        for (const key in flv) {
            if (flv[key]) {
                if (flv[key].indexOf('http') !== -1 || flv[key].indexOf('https') !== -1) streamListUrl.push(flv[key]);
            }
        }
    } else if (pro == 'https:') {
        for (const key in flv) {
            if (flv[key]) {
                if (flv[key].indexOf('https') === -1) streamListUrl.push(flv[key].replace('http', 'https'));
                else if (flv[key].indexOf(pro) !== -1) {
                    streamListUrl.push(flv[key]);
                }
            }
        }
    } else if (pro == 'rtmp:') {
        for (const key in rtmp) {
            if (rtmp[key]) {
                if (rtmp[key].indexOf(pro) !== -1) streamListUrl.push(rtmp[key]);
            }
        }
    }

    return streamListUrl.filter(function (ele, index, self) {
        return self.indexOf(ele) == index;
    });
}

function createExpressPlayerComponent(player) {
    const renderPanel = document.createElement("div");
    renderPanel.className = "render-panel";
    let div = document.createElement("div");
    div.className = "canvas-wrapper";
    const canvas = player.canvas;
    canvas.className = "render-canvas";
    div.append(canvas);
    renderPanel.appendChild(div);
    div = document.createElement("div");
    const playButton = document.createElement("button");
    playButton.innerText = "播放"
    playButton.onclick = () => {
        player.play();
    }
    const pauseButton = document.createElement("button");
    pauseButton.innerText = "暂停"
    pauseButton.onclick = () => {
        player.pause();
    }
    const muteButton = document.createElement("button");
    let muteListener, unmuteListener;
    unmuteListener = () => {
        player.setMuted(false);
        muteButton.innerText = "关闭声音"
        muteButton.onclick = muteListener
    }
    muteListener = () => {
        player.setMuted(true);
        muteButton.innerText = "开启声音"
        muteButton.onclick = unmuteListener
    }
    muteButton.innerText = "关闭声音"
    muteButton.onclick = muteListener;
    div.appendChild(playButton);
    div.appendChild(pauseButton);
    div.appendChild(muteButton);
    renderPanel.appendChild(div);
    return renderPanel;
}

function playStream(streamID, cdnUrl) {
    const browser = getBrowser();
    let hasAudio = true;
    let hasVideo = true;
    let playType;

    const index = useLocalStreamList.findIndex(streamInfo => streamInfo.streamID == streamID);
    const streamInfo = useLocalStreamList[index];

    if (streamInfo && streamInfo.extraInfo && streamInfo.extraInfo.length !== 0) {
        try {
            playType = JSON.parse(streamInfo.extraInfo).playType;
        } catch (err) {
            alert(err);
        }
    }

    playType === 'Video' ? (hasAudio = false) : (hasAudio = true);
    playType === 'Audio' ? (hasVideo = false) : (hasVideo = true);

    if (cdnUrl.length !== 0) {
        const flvUrl = cdnUrl[0];
        if (flvjs.isSupported() && useFlvJS) {
            $('#video-container').append(`
                <video id="${streamID}" autoplay muted
                x-webkit-airplay="true"
                x5-video-player-type="h5-page"
                webkit-playsinline="true"
                playsinline></video>`
            )
            videoElement = document.getElementById(streamID);
            videoElement.muted = false;
            videoElement.controls = true;
            videoElement.autoplay = true;
            const createFlvPlayer = () => {
                //若支持flv.js
                if (useLocalStreamList[index].player != null) {
                    useLocalStreamList[index].player.unload();
                    useLocalStreamList[index].player.detachMediaElement();
                    useLocalStreamList[index].player.destroy();
                    useLocalStreamList[index].player = null;
                }
                //若支持flv.js
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url: flvUrl,
                    hasAudio: hasAudio,
                    hasVideo: hasVideo,
                });
                flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function () {
                    console.error('LOADING_COMPLETE');
                    flvPlayer.play();
                });
                flvjs.exportSEI((res) => {
                    console.log('获得了SEI信息', utf8ByteDecode(res));
                })
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                videoElement.muted = false;
                videoElement.controls = true;

                useLocalStreamList[index].player = flvPlayer;

                $(`#${streamID}`)[0].ontimeupdate = function () { 
                    // console.log('ontimeupdate ' + streamID + ' ' + $(`#${streamID}`)[0].currentTime);  
                    if ($(`#${streamID}`)[0]) {
                        useLocalStreamList[index].playTime = $(`#${streamID}`)[0].currentTime;
                    }
                };
            }
            createFlvPlayer();
            if(useLocalStreamList[index].playTimer){
                clearInterval(useLocalStreamList[index].playTimer);
            }
            let lastPlayTimeTime = 0;
            useLocalStreamList[index].playTime = $(`#${streamID}`)[0].currentTime;
            // // 定时去检测
            useLocalStreamList[index].playTimer = setInterval(()=>{
                const online = navigator ? navigator.onLine ? true : false : true;
                if (online) {
                    console.warn("remote ###", lastPlayTimeTime, useLocalStreamList[index].playTime);
                    // 如果检测到进度没有变化,重新拉流
                    if( useLocalStreamList[index].playTime >= 0 && lastPlayTimeTime === useLocalStreamList[index].playTime){
                        console.warn('replay');
                        useLocalStreamList[index].player.unload();
                        useLocalStreamList[index].player.load();
                        lastPlayTimeTime = 0;
                        useLocalStreamList[index].playTime = $(`#${streamID}`)[0].currentTime;
                        useLocalStreamList[index].player.play();
                    } else {
                        lastPlayTimeTime = useLocalStreamList[index].playTime;
                    }
                }
            },1000);
            useLocalStreamList[index].player.play();
        } else {
            $('#video-container').append(`
                <div id="${streamID}"></div>`
            )
            useLocalStreamList[index].player && useLocalStreamList[index].player.destroy();
            useLocalStreamList[index].player = new window.ZegoExpressPlayer(zg, {
                mode: "live"
            });
            document.getElementById(streamID).appendChild(createExpressPlayerComponent(useLocalStreamList[index].player));
            useLocalStreamList[index].player.src = flvUrl;
            useLocalStreamList[index].player.play();
        }
    }
}

function encodeString(str) {
    return Uint8Array.from(
      Array.from(unescape(encodeURIComponent(str))).map(val => val.charCodeAt(0))
    );
}


$(async () => {
    await checkAnRun();
    zg.off('roomStreamUpdate');
    zg.on('roomStreamUpdate', (roomID, updateType, streamList, extendedData) => {
        console.warn('roomStreamUpdate roomID ', roomID, updateType, streamList, extendedData);
        // console.log('l', zg.stateCenter.streamList);
        if (updateType == 'ADD') {
            
            // videoElement = document.getElementById('test');
            streamList.forEach(streamInfo => {
                const streamID = streamInfo.streamID;
                const cdnUrl = filterStreamList(streamInfo);
                
                useLocalStreamList.push(streamInfo);
                cdnUrls.push({streamID, cdnUrl})
                playStream(streamID, cdnUrl);
            })
        } else if (updateType == 'DELETE') {
            for (let k = 0; k < useLocalStreamList.length; k++) {
                for (let j = 0; j < streamList.length; j++) {
                    if (useLocalStreamList[k].streamID === streamList[j].streamID) {
                        console.info(useLocalStreamList[k].streamID + 'was devared');
                        const player = useLocalStreamList[k].player
                        if (player && !(player instanceof window.ZegoExpressPlayer)) {
                            player.pause();
                            player.unload();
                            player.detachMediaElement();
                            player.destroy();
                            useLocalStreamList[k].player = null;
                            if (flvPlayer == player) flvPlayer = null;
                        } else  {
                            player.destroy();
                            useLocalStreamList[k].player = null;
                            if (flvPlayer == player) flvPlayer = null;
                        }
                        // $('#video-container').html('');
                        $(`#${useLocalStreamList[k].streamID}`).remove();
                        clearInterval(useLocalStreamList[k].playTimer);
                        useLocalStreamList.splice(k--, 1);

                        break;
                    }
                }
            }
        }
    });

    $('#cdnAddPush').click(async () => {
        const result = await zg.addPublishCdnUrl(
            publishStreamId,
            //md5(appID + Math.ceil(new Date().getTime() / 1000).toString() + $('#secret').val()),
            'rtmp://wsdemo.zego.im/livestream/' + publishStreamId,
        );
        if (result.errorCode == 0) {
            console.warn('add push target success');
            // updateCdnStatus('add');
            ($('#cdnDelPush')[0]).disabled = false;
            ($('#cdnPlay')[0]).disabled = false;
            alert('rtmp://rtmp.wsdemo.zego.im/livestream/'+publishStreamId)
        } else {
            console.warn('add push target fail ' + result.errorCode + ' ' + result.extendedData);
        }
    });

    $('#cdnDelPush').click(async () => {
        const result = await zg.removePublishCdnUrl(
            publishStreamId,
            //md5(appID + Math.ceil(new Date().getTime() / 1000).toString() + $('#secret').val()),
            'rtmp://wsdemo.zego.im/livestream/' + publishStreamId,
        );
        if (result.errorCode == 0) {
            console.warn('del push target success');
            // updateCdnStatus('delete');
            ($('#cdnDelPush')[0]).disabled = true;
            ($('#cdnPlay')[0]).disabled = true;
        } else {
            console.warn('del push target fail ' + result.errorCode + ' ' + result.extendedData);
        }
    });

    $('#cdnPlay').click(() => {
        if (!isLogin && !loginRoom) {
            alert('please enter the room');
            return;
        }
        const browser = getBrowser();
        let hasVideo = true;
        let hasAudio = true;
        publishType === 'Video' ? (hasAudio = false) : (hasAudio = true);
        publishType === 'Audio' ? (hasVideo = false) : (hasVideo = true);

        if (flvjs.isSupported() && useFlvJS) {
            $('#cdn-container').append(`
                <video id="cdn" autoplay muted preload="auto"
                x-webkit-airplay="true"
                x5-video-player-type="h5-page"
                webkit-playsinline="true"
                playsinline></video>`
            )
            cdnVideoElement = document.getElementById('cdn');
            cdnVideoElement.width = 320;
            cdnVideoElement.height = 240;
            cdnVideoElement.autoplay = true;
            cdnVideoElement.muted = false;
            cdnVideoElement.controls = true;

            let lastCdnPlayTimeTime = 0;
            cdnPlayTime = 0;

            const createFlvPlayer = () => {
                //若支持flv.js
                if (cdnFlvPlayer != null) {
                    cdnFlvPlayer.pause();
                    cdnFlvPlayer.unload();
                    cdnFlvPlayer.detachMediaElement();
                    cdnFlvPlayer.destroy();
                    cdnFlvPlayer = null;
                    lastCdnPlayTimeTime = 0;
                    cdnPlayTime = 0;
                }
                cdnFlvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url: 'https://hdl-wsdemo.zego.im/livestream/' + publishStreamId + '.flv',
                    hasAudio: hasAudio,
                    hasVideo: hasVideo,
                });
                flvjs.exportSEI((res) => {
                    console.log('获得了SEI信息', utf8ByteDecode(res));
                })
                cdnFlvPlayer.attachMediaElement(cdnVideoElement);
                cdnFlvPlayer.load();
                cdnVideoElement.muted = false;
                cdnVideoElement.controls = true;
                
            }
            createFlvPlayer();

            const checkPlayState = async () => {
                console.warn("local ### ", lastCdnPlayTimeTime , cdnPlayTime);
                if(cdnPlayTime>=0 && lastCdnPlayTimeTime === cdnPlayTime){
                    console.warn("replay url: ", 'https://hdl-wsdemo.zego.im/livestream/' + publishStreamId + '.flv');
                    cdnFlvPlayer.unload();
                    cdnFlvPlayer.load();
                    cdnFlvPlayer.play();
                    lastCdnPlayTimeTime = 0;
                    cdnPlayTime = cdnVideoElement.currentTime;
                } else {
                    lastCdnPlayTimeTime = cdnPlayTime;
                }
            }

            const nextTimer = () => {
                if (cdnFlvPlayTimer != null) {
                    clearTimeout(cdnFlvPlayTimer);
                    cdnFlvPlayTimer = null;
                }
                cdnFlvPlayTimer = setTimeout(async ()=>{
                    console.warn("### nextTimer");
                    await checkPlayState();
                    nextTimer();
                }, 1000);
            }

            nextTimer();
        } else {
            $('#cdn-container').html("");
            $('#cdn-container').append(`
                <div id="cdn"></div>`
            )
            cdnFlvPlayer && cdnFlvPlayer.destroy();
            cdnFlvPlayer = new window.ZegoExpressPlayer(zg, {
                mode: "live"
            });
            document.getElementById('cdn').appendChild(createExpressPlayerComponent(cdnFlvPlayer));
            cdnFlvPlayer.src = 'https://hdl-wsdemo.zego.im/livestream/' + publishStreamId + '.flv';
            cdnFlvPlayer.play();
        }
    });
    $('#playCDN').click(() => {
        console.error('play');
        const browser = getBrowser();
        // if (browser == 'Safari') {
        //     cdnUrls.forEach(item => {
        //         $(`#${item.streamID}`).remove();
        //         setTimeout(() => {
        //             playStream(item.streamID, item.cdnUrl);
        //         }, 1000)
        //     })
        // }
        useLocalStreamList.forEach(item => {
            item.player && item.player.play()
        })
        flvPlayer && flvPlayer.play();
    });
    
    $('#createRoom').unbind('click');
    $('#createRoom').click(async () => {
        // let loginSuc = false;
        const channelCount = parseInt($('#channelCount').val());
        console.error('channelCount', channelCount);
        try {
            isLogin = await enterRoom();
            isLogin && (await publish({ camera: { channelCount: channelCount } }, true));
        } catch (error) {
            console.error(error);
        }
    });
    $('#leaveRoom').unbind('click');
    $('#leaveRoom').click(function () {
        useLocalStreamList.forEach(item => {
            clearInterval(item.playTimer);
            item.playTimer = null;
            if (typeof item.player !== "undefined" && !useFlvJS) {
                item.player && item.player.destroy();
                item.player = null;
            } 
        });
        useLocalStreamList = []
        if (typeof flvPlayer !== 'undefined') {
            if (flvPlayer != null && useFlvJS) {
                flvPlayer.pause();
                flvPlayer.unload();
                flvPlayer.detachMediaElement();
                flvPlayer.destroy();
                flvPlayer = null;
            } else if (flvPlayer != null) {
                flvPlayer && flvPlayer.destroy();
                flvPlayer = null;
            }
            if (cdnFlvPlayTimer) {
                clearInterval(cdnFlvPlayTimer);
                cdnFlvPlayTimer = null;
            }
        }
        $('#video-container').html('');
        if (typeof cdnFlvPlayer !== 'undefined') {
            if (cdnFlvPlayer != null && useFlvJS) {
                cdnFlvPlayer.pause();
                cdnFlvPlayer.unload();
                cdnFlvPlayer.detachMediaElement();
                cdnFlvPlayer.destroy();
                cdnFlvPlayer = null;
            } else {
                cdnFlvPlayer && cdnFlvPlayer.destroy();
                cdnFlvPlayer = null;
            }
        }
        $('#cdn-container').html('');

        ($('#cdnDelPush')[0]).disabled = true;
        ($('#cdnPlay')[0]).disabled = true;


        logout();
        isLogin = false;
    });
    $("#renewToken").click(async () => {
        const roomID = $("#roomId").val();
        const _expireTime = document.querySelector("#expireTime").value;
        const expireTime = parseInt(_expireTime);
        const userID = $("#userID").val();
        const token = await getToken(userID, roomID, expireTime);
        $("#custom-token").val(token);
        zg.renewToken(token, roomID);
    });
    $('#publish').click(() => {
        const publishStreamID = publishStreamId || 'web-' + new Date().getTime();
        const result = zg.startPublishingStream(publishStreamID,  previewVideo.srcObject, { roomID: $('#roomId').val(), isSEIStart: sei });
        console.log('publish stream' + publishStreamID, result);
    });

    // $('#secret').change(() => {
    //     if ($('#secret').val() == '') {
    //         ($('#cdnAddPush')[0]).disabled = true;
    //         ($('#cdnDelPush')[0]).disabled = true;
    //     } else {
    //         ($('#cdnAddPush')[0]).disabled = false;
    //         ($('#cdnDelPush')[0]).disabled = true;
    //     }
    // });
    // window.addEventListener('online', () => {
    //     useLocalStreamList.forEach(item => {
    //         if(item.playTime > 0 && $(`#${item.streamID}`)[0].currentTime === item.playTime){
    //             console.warn('reload ', item.streamID)
    //             item.player.unload();
    //             item.player.load();
    //             item.player.play();
    //         }
    //     })
        
    // })
});
window.addEventListener('unhandledrejection', function(event){
  // console.log(err)
  event.preventDefault();
})
